<include file="public@header" />
</head>

<body>
    <div class="wrap">
        <ul class="nav nav-tabs">
            <li class=""><a href="{:url('team/index',array('id'=>$id))}">暂定决算单</a></li>
            <li class="active"><a>施工供应商决算新增</a></li>
        </ul>
        <form method="post" class="form-horizontal js-ajax-form margin-top-20" action="{:url('team/doadd')}"
            enctype="multipart/form-data" id="uploadForm">


            <div class="form-group">
                <label for="js-smtpsecure" class="col-sm-2 control-label">
                    暂定总价
                </label>
                <div class="col-md-6 col-sm-10">
                    <input type="text" class="form-control" name="tempPrice">
                </div>
            </div>

            <div class="form-group">
                <label for="js-smtpsecure" class="col-sm-2 control-label">
                    描述文字
                </label>
                <div class="col-md-6 col-sm-10">
                    <textarea name="contentDesc" cols="10" rows="5" class="form-control"></textarea>
                </div>
            </div>

            <div class="form-group">
                <label for="js-smtpsecure" class="col-sm-2 control-label">
                    决算总价
                </label>
                <div class="col-md-6 col-sm-10">
                    <input type="text" class="form-control" name="deciPrice">
                </div>
            </div>

            <div class="form-group">

                <label for="js-smtpsecure" class="col-sm-2 control-label">
                    供应商姓名
                </label>
                <div class="col-md-6 col-sm-10">
                    <select name="tid" id="nameSelect" class="form-control">
                        <option value=""></option>
                        <volist name="some" id="v">
                            <option value="{$v.id}" data-type="{$v['attrName']}">{$v['name']}</option>
                        </volist>
                    </select>
                </div>
            </div>


            <div class="form-group">

                <label for="js-smtpsecure" class="col-sm-2 control-label">
                    供应商
                </label>
                <div class="col-md-6 col-sm-10">
                    <input  type="text" id="teamDisplay" class="form-control" readonly>
                    <!-- <select name="tid" id="nameSelect" class="form-control">
                    <option value=""></option>
                    <volist name="some" id="v">
                        <option value="{$v.id}">{$v['attrName']}</option>
                    </volist>
                </select> -->
                </div>
            </div>


            <div class="form-group">

                <label for="js-smtpsecure" class="col-sm-2 control-label">
                    决算明细
                </label>
                <div class="col-md-6 col-sm-10">
                    <input type="file" id="imgUpload" name="img[]" multiple accept="image/*" />
                    <div id="imgPreviewContainer" class="image-preview-container" style="margin-top: 10px; display: flex; flex-wrap: wrap;"></div>
                </div>
            </div>



            <div class="form-group">

                <label for="js-smtpsecure" class="col-sm-2 control-label">
                    合同
                </label>
                <div class="col-md-6 col-sm-10">
                    <input type="file" id="contractUpload" name="contract[]" multiple accept="image/*" />
                    <div id="contractPreviewContainer" class="image-preview-container" style="margin-top: 10px; display: flex; flex-wrap: wrap;"></div>
                </div>
            </div>

            <input type="hidden" name="eid" value="{$id}">
            <input type="hidden" name="type" value="{$type}">

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-primary js-ajax-submit">{:lang('SAVE')}</button>
                    <a class="btn btn-default" href="javascript:history.back(-1);">{:lang('BACK')}</a>
                </div>
            </div>
        </form>
    </div>
    <script src="__STATIC__/js/admin.js"></script>
    <style>
        .image-preview-item {
            position: relative;
            margin: 5px;
            width: 100px;
            height: 100px;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            cursor: pointer;
        }
        .image-preview-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .image-preview-item .delete-btn {
            position: absolute;
            top: 0;
            right: 0;
            background: rgba(255, 0, 0, 0.7);
            color: white;
            border: none;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            cursor: pointer;
            font-size: 12px;
            z-index: 10;
        }
        
        /* 模态框样式 */
        .image-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            overflow: auto;
        }
        
        .modal-content {
            margin: auto;
            display: block;
            max-width: 90%;
            max-height: 90%;
            margin-top: 2%;
        }
        
        .modal-close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
    <script src="__STATIC__/js/image-uploader.js"></script>
    <script>
        // 页面加载时初始化班组
        function initializeTeamDisplay() {
            const nameSelect = document.getElementById('nameSelect');
            const selectedOption = nameSelect.options[nameSelect.selectedIndex];
            if (selectedOption) {
                const typeValue = selectedOption.getAttribute('data-type');
                const teamDisplay = document.getElementById('teamDisplay');
                teamDisplay.value = typeValue || ''; // 设置班组输入框的值
            }
        }

        // 姓名选择框联动班组
        document.getElementById('nameSelect').addEventListener('change', function () {
            const selectedOption = this.options[this.selectedIndex];
            if (selectedOption) {
                const typeValue = selectedOption.getAttribute('data-type');
                const teamDisplay = document.getElementById('teamDisplay');
                teamDisplay.value = typeValue || ''; // 设置班组输入框的值
            }
        });

        // 页面加载完成后初始化所有功能
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化班组显示
            initializeTeamDisplay();
            
            // 初始化图片上传组件
            // 决算明细图片上传
            const imgUploader = new ImageUploader({
                inputId: 'imgUpload',
                previewContainerId: 'imgPreviewContainer',
                fieldName: 'img',
                useDataTransfer: true
            });
            
            // 合同图片上传
            const contractUploader = new ImageUploader({
                inputId: 'contractUpload',
                previewContainerId: 'contractPreviewContainer',
                fieldName: 'contract',
                useDataTransfer: true
            });
        });
    </script>
</body>

</html>